﻿<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Creating Basic App. Step 1</title>
	</head>
<body>

<script type="text/javascript" charset="utf-8">
var filmset = [
    { id:1, title:"The Shawshank Redemption", year:1994},
    { id:2, title:"The Godfather", year:1972},
    { id:3, title:"The Godfather: Part II", year:1974},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966},
    { id:5, title:"My Fair Lady", year:1964},
    { id:6, title:"12 Angry Men", year:1957}
];
webix.ui({
	view:"layout", width:500, 
    rows: [
        { view:"toolbar", id:"mybar", elements:[
                    { view:"button", value:"Add", width:100 },
                    { view:"button", value:"Delete", width:100 }
                    ]
        },
        { cols:[
            { view:"form", width: 200, elements:[
                    { view:"text", placeholder:"Title"},  //1st column
                    { view:"text", placeholder:"Year"}     
                                        ]
            },         
		    { view:"list", 
            template:"#title# - #year#",   //2nd column
            select:true, //enables selection of list items
            height:400, 
            data: filmset
            }]
        }
    ]
});

</script>

</body>
</html>